<template>
    <div class="FD">
        <!-- <el-button @click="ss">name</el-button> -->
        <el-form :model="ruleForm" label-width="auto" style="max-width: 600px;margin: auto;" ref="ruleFormRef"
            :rules="rules" status-icon>
            <div id="one">
                <p style="font-weight: bold;font-size: 40px;">欢迎登录</p>
                <p>
                    <el-form-item label="账号：" prop="name" style="margin-left: 100px">
                        <el-input v-model="ruleForm.name" style="width: 240px" />
                    </el-form-item>
                </p>
                <p>
                    <el-form-item label="密码：" prop="pass" style="margin-left: 100px;">
                        <el-input v-model="ruleForm.pass" style="width: 240px" :type="showPass ? 'text' : 'password'">
                            <template #suffix>
                                <el-icon @click="showPass = !showPass"><View /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </p>
                <el-button type="primary" style="width:290px;margin-top: 20px;margin-left: 10px;" @click="resetForm">登录</el-button>
                <p class="wj" style="margin-left: 30px;"><span @click="WJMM" style="margin-left:160px">忘记密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                        @click="zc">注册</span></p>
            </div>
        </el-form>
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
// import { mapMutations, useStore } from 'vuex';

import axios from 'axios'

export default {
    name: 'App',
    setup() {
        // const store = useStore();
        // const storeMutations = mapMutations(['setName'], store);
        let router = useRouter();
        let showPass = ref(false);
        let ruleForm = reactive({
            name: "",
            pass: ""
        });
        let rules = reactive({
            name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
            pass: [{ required: true, message: "请输入密码", trigger: "blur" }]
        });
        let ruleFormRef = ref(null);

        function WJMM() {
            alert("123");
        };
        function zc() {
            alert("666");
        };

        function resetForm() {
            ruleFormRef.value.validate((valid) => {
                if (valid) {
                    axios.get("http://localhost:5131/api/Sys_user/GetLogin?uname=" + ruleForm.name + "&pass=" + ruleForm.pass)
                    .then((res) => {
                        if(res.data.code == 1){
                            sessionStorage.setItem("token", res.data.value);
                            router.push("/Main");
                            // router.push({
                            //     path:'/Main',
                            //     query:{
                            //         name:res.data
                            //     }
                            // })
                        }else{
                            ElMessage.error('登录失败，用户名或密码错误！！！');
                        }
                    })
                    .catch((err) => console.log(err));
                    
                } else {
                    ElMessage.error('登录失败，请联系客服！！！');
                }
            })
        }

        // function ss(){
        //     router.push("/666");
        // }
        
        
        return {
            WJMM,
            zc,
            resetForm,
            router,
            ruleForm,
            rules,
            ruleFormRef,
            showPass
        }
        
    }
    
}

</script>

<style scoped>
.FD {
    /* width: 100%;
    height: 100vh;
    border:1px solid black;
    margin: 0;
    padding: 0; */
    background-size: cover;
    height: 100vh;
    position: page;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    background-image: url('..//assets//1.png');
}

#one {
    width: 500px;
    height: 400px;
    border: 1px solid black;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    background-color: #fff;
    margin: auto;
    text-align: center;
    position: relative;
    top: 180px;
}

.wj {
    color: #0000FF
}
</style>